<template>
  <div class="page_payPwd">
    <van-nav-bar
      :title="(allUserInfo.issetpaypwd ? '修改' : '设置') + '支付密码'"
      left-arrow
      @click-left="$router.push('/profile')"
    />
    <van-popup
      :style="{'min-height': '30%', width: '90%'}"
      v-model="showpop"
    >
      <div
        class="slideverify"
        v-show="isShowSlide"
      >
        <div id="verifyCodeDemo">
          <p
            id="picyzm"
            style="margin:10px"
          ></p>
            <div style="text-align:center;margin-bottom:5px;margin-right:10px;">点击图片刷新</div>
            <van-field
              autocomplete="off"
              v-model="picyzmValue"
              style="text-align:center;"
              placeholder="请输入4位验证码"
            />
            <div style="text-align: center;">
              <van-button
                style="margin:10px;width:65px;"
                size="small"
                @click="showpop = false"
              >取消</van-button>
                <van-button
                  style="margin:10px;width:65px;"
                  size="small"
                  type="info"
                  @click="handleVerify()"
                >验证</van-button>
            </div>
        </div>
  </div>
  </van-popup>
  <van-form @submit="onSubmit">
    <van-field
      autocomplete="off"
      v-model="account"
      type="number"
      readonly
      label="手机号"
      name="account"
      maxlength="11"
    >
      <template #button>
        <van-button
          v-show="showcount"
          size="small"
          type="info"
          :disabled="disabledStatus"
          @click="sendCode(2)"
          native-type="button"
        >发送验证码</van-button>
          <van-button
            v-show="!showcount"
            size="small"
            type="info"
            disabled
            @click="sendCode(2)"
            native-type="button"
          >{{ count }} s</van-button>
      </template>
      </van-field>
      <van-field
        autocomplete="off"
        clearable
        v-model="code"
        type="number"
        name="code"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[
          {
            required: true,
            message: '请填写验证码'
          }
        ]"
        maxlength="4"
      />
      <van-field
        autocomplete="off"
        clearable
        v-model="payPwd"
        type="password"
        name="payPwd"
        label="支付密码"
        placeholder="请输入支付密码"
        :rules="[{required: true, message: '请填写密码'}]"
        @focus="showKeyboard = true"
        maxlength="6"
      />
      <div style="margin: 16px;">
        <van-button
          :type="allUserInfo.issetpaypwd ? 'danger' : 'info'"
          block
          round
          native-type="submit"
        >{{ allUserInfo.issetpaypwd ? '确定修改' : '提交' }}
          </van-button>
      </div>
  </van-form>

  <!-- 密码输入框 -->
  <!--    <van-password-input-->
  <!--      :value="value"-->
  <!--      info="密码为 6 位数字"-->
  <!--      :focused="showKeyboard"-->
  <!--      @focus="showKeyboard = true"-->
  <!--    />-->
  <!-- 数字键盘 -->
  <van-number-keyboard
    :show="showKeyboard"
    @input="onInput"
    @delete="onDelete"
    @blur="showKeyboard = false"
  />

  <van-popup
    round
    :close-on-click-overlay="false"
    v-model:show="showPopup"
    bind:close="onClose"
  >
    <!-- <verCode ref="slideblock" @popFUNC="popFUNC"></verCode> -->
    <div style="width:300px">
<slide-verify
      :l="42"
      :r="10"
      :w="315"
      :h="155"
      style="width:300px"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      slider-text="向右滑动"
    ></slide-verify>
    </div>
    
      </van-popup>
      </div>
</template>

<script>
import {Toast} from 'vant'
import {GVerify} from '@/utils/gVerify.js'
import {mapGetters} from 'vuex'
import SlideVerify from '@/components/slideImg' //引入
import verCode from '@/components/verCode' //引入
export default {
  name: 'payPwd',
  data() {
    return {
      showPopup: false,
      isShowSlide: false,
      showpop: false,
      showcount: true,
      count: '',
      timer: null,
      disabled: true,
      account: '',
      code: '',
      payPwd: '',
      value: '123',
      showKeyboard: false,
      show: true,
      verifyCode: null,
      picyzmValue: ''
    }
  },

  components: {
    verCode,
    SlideVerify //注册组件
  },
  computed: {
    ...mapGetters(['allUserInfo']),

    disabledStatus() {
      let result
      if (this.account && this.account.length === 11) {
        result = !this.disabled
      } else {
        result = this.disabled
      }
      return result
    }
  },
  mounted() {
    if (!this.allUserInfo || !this.allUserInfo.account) {
      Toast('登录信息已过期，请重新登录')
    }
    this.account = this.allUserInfo.account
  },

  methods: {
    //验证码
    creatGVerify() {
      console.log('fasfdasfa')
      //初始化验证码
      this.verifyCode = new GVerify({
        id: 'picyzm',
        type: 'blend'
      })
    },
    handleVerify() {
      var res = this.verifyCode.validate(this.picyzmValue)
      if (res) {
        this.sendSmsCode()
      } else {
        alert('验证码错误')
      }
    },
    hideSlide() {
      setTimeout(() => {
        this.isShowSlide = false
      }, 500)
    },
    sendSmsCode() {
      setTimeout(() => {
        this.showpop = false
        this.getQode()
      }, 500)
    },
    async getQode() {
      // 请求参数
      const TIME_COUNT = 60

      const params = {phone: this.account, type: 2}
      console.log('aaaaaa')
      const res = await this.$api.user.reqSendCode(params)

      if (res.code === 200) {
        Toast(res.data)
        if (!this.timer) {
          this.count = TIME_COUNT
          this.showcount = false

          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.showcount = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
      } else {
        Toast(res.msg)
      }
    },
    sendCode(index) {
      this.getQode()
      // this.showPopup = true
    },
    popFUNC() {
      this.showPopup = false
      this.getQode()
    },
    onSuccess() {
      this.showPopup = false
      this.getQode()
    },

    onInput(key) {
      this.payPwd = (this.payPwd + key).slice(0, 6)
    },
    onDelete() {
      this.payPwd = this.payPwd.slice(0, this.payPwd.length - 1)
    },

    onSubmit(values) {
      const {account, code, payPwd} = values
      const params = {
        account,
        code,
        password: this.$Base64.encode(this.$md5(payPwd) + this.$md5('jinpin888'))
      }
      this.$api.stock.reqSetPayPwdOrUpdatePayPwd(params).then(res => {
        if (res.code === 200) {
          Toast(res.data)
          this.$router.push('/profile')
        }
      })
    }
  }
}
</script>

<style scoped></style>
